import React, { useEffect, useState } from 'react'
import './index.scss'
import NavBar from '../../components/nav-bar'
import Room from './room'
import qs from 'qs'
import axios from '../../utils/axios'
import {useHistory}  from 'react-router-dom'

export default function RoomDetail() {
  const { friendid, username, groupid, groupName } =
    qs.parse(window.location.search, { ignoreQueryPrefix: true }) || {}
  const [groupMember, setGroupMember] = useState(0)
  const history = useHistory()
  console.log(`'${friendid}'`, 'friendid')
  let type
  if (friendid) {
    type = 'friend'
  } else if (groupid) {
    type = 'group'
  }
  useEffect(() => {
    // 获取好友信息
    axios.get(`/group/getGroupDetail?groupid=${groupid}`).then((res) => {
      setGroupMember(res.data?.data.length)
    })
  }, [friendid, groupid])
  const rightClick = () => {
    if (type === 'group') {
      history.push(`/roomDetail/info-detail?groupid=${groupid}`)
    }
  }
  return (
    <div className="room-detail">
      <NavBar
        roomName={username || groupName + `(${groupMember})`}
        rightClick={rightClick}
      ></NavBar>
      <Room id={friendid || groupid} type={type}></Room>
    </div>
  )
}
